<template>
  <view>
    <view v-if="!item.isRange" @click="clickPicker(item)" class="picker">
      <view v-if="pickerFormData[item.key].value" class="value">
        {{ pickerFormData[item.key].value }}
        <uni-icons
          class="picker-clear"
          type="clear"
          color="c0c4cc"
          size="40rpx"
          @click.stop="clickClearIcon(item)"
        ></uni-icons>
      </view>
      <view v-else class="placeholder">
        {{ item.placeholder || '请选择' + item.label }}
        <uni-icons
          class="forward-icon"
          type="forward"
          color="#999"
          size="14"
        ></uni-icons>
      </view>
      <slot name="right"></slot>
    </view>
    <view v-else class="value-list">
      <view class="first-item" @click="clickFirstPicker(item)">
        <view v-if="pickerFormData[item.key].value[0]" class="value">
          {{ pickerFormData[item.key].value[0] }}
          <uni-icons
            class="picker-clear"
            type="clear"
            color="c0c4cc"
            size="40rpx"
            @click.stop="clickClearIcon(item, 0)"
          ></uni-icons>
        </view>
        <view v-else class="placeholder">
          {{ item.firstPlaceholder || '开始时间' }}
        </view>
      </view>
      <view class="link-line"></view>
      <view class="second-item" @click="clickSecondPicker(item)">
        <view v-if="pickerFormData[item.key].value[1]" class="value">
          {{ pickerFormData[item.key].value[1] }}
          <uni-icons
            class="picker-clear"
            type="clear"
            color="c0c4cc"
            size="40rpx"
            @click.stop="clickClearIcon(item, 1)"
          ></uni-icons>
        </view>
        <view v-else class="placeholder">
          {{ item.secondPlaceholder || '结束时间' }}
        </view>
      </view>
      <slot name="right"></slot>
    </view>
    <u-picker
      :show="showPicker"
      :columns="pickerOptions"
      :closeOnClickOverlay="true"
      @confirm="confirmTimePicker"
      @close="closeTimePicker"
      @cancel="closeTimePicker"
    ></u-picker>
  </view>
</template>

<script>
  import { TIME_CONFIG } from './config.js'
  export default {
    name: 'pickerForm',
    data() {
      return {
        showPicker: false,
        pickerOptions: [],
        selectPopupKey: '',
        selectIndex: 0,
        pickerFormData: {},
		starEat:'',
		endEath:'',
		sum:0
      }
    },
    props: {
      pickerForm: {
        type: Object
      },
      ruleForm: {
        type: Object
      },
      item: {
        type: Object
      },
	  initValue: {
		type:Object
	  }
    },
    watch: {
      pickerForm: {
        handler(newVal, oldVal) {
          // this.pickerFormData = { ...newVal }
        },
        deep: true
      },
	  ruleForm:{
		  handler(newVal, oldVal) {	
		    if (this.ruleForm[this.item.key]) {
		      this.getPickerFormData()
		    }
		  },
		  deep: true
	  }
    },
    created() {
      if (this.ruleForm[this.item.key]) {
        this.getPickerFormData()
      }
	  if(this.item.isSecond && TIME_CONFIG.length > 2){
		  //是否需要秒
		  TIME_CONFIG.pop()
	  }
    },
    methods: {
      getPickerFormData() {
        if (this.item.isRange) {
          const pickerArr = this.ruleForm[this.item.key]?.split('-')
          this.pickerFormData[this.item.key] = {
            value: [pickerArr[0], pickerArr[1]]
          }
        } else {
          this.pickerFormData[this.item.key] = {
            value: this.ruleForm[this.item.key]
          }
        }
		this.$forceUpdate()
      },
      clickPicker(item) {
        this.getOptions(item)
      },
      clickFirstPicker(item) {
        this.selectIndex = 0
        this.getOptions(item)
      },
      clickSecondPicker(item) {
        this.selectIndex = 1
        this.getOptions(item)
      },
      getOptions(item) {
        this.pickerFormData[item.key] = this.pickerFormData[item.key] || {}
        if (item.isTime) {
          this.pickerOptions = [...TIME_CONFIG ]
        } else {
          this.pickerOptions = item.options || []
        }
        this.selectPopupKey = item.key
        this.showPicker = true
        this.$emit('setPickerForm', this.pickerFormData)
      },
      clickClearIcon(item, index) {
        this.pickerOptions = []
        if (this.item.isRange) {
          this.pickerFormData[item.key].value[index] = ''
        } else {
          this.pickerFormData[item.key].value = ''
        }
        this.$emit('setPickerForm', this.pickerFormData)
      },
      confirmTimePicker($event) {
        this.showPicker = false
        const resValue = $event.value.join(this.item.isTime ? ':' : this.item.splitIcon || '/')
        if (this.item.isRange) {
          this.pickerFormData[this.selectPopupKey].value = this.pickerFormData[this.selectPopupKey].value || []
          this.pickerFormData[this.selectPopupKey].value[this.selectIndex] = resValue
        } else {
          this.pickerFormData[this.selectPopupKey].value = resValue
        }
        this.$emit('setPickerForm', this.pickerFormData)
      },
      closeTimePicker() {
        this.showPicker = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .value {
    display: flex;
    align-items: center;
    margin-right: -40rpx;
    .picker-clear {
      margin-left: 6rpx;
    }
  }
  .placeholder {
    display: flex;
    align-items: center;
    padding-right: 16rpx;
    color: #ccc;
  }
  ::v-deep.picker {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .value-list {
    display: flex;
    align-items: center;
	justify-content: space-between;
	.first-item{
		width: 200rpx;
		height: 64rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: .6;
		border: 1rpx solid #777777;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.second-item{
		width: 200rpx;
		height: 64rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: .6;
		border: 1rpx solid #777777;
		display: flex;
		align-items: center;
		justify-content: center;
	}
    .value {
      margin-right: -20rpx;
    }
    .link-line {
      width: 20rpx;
      height: 4rpx;
      margin-right: 14rpx;
      border-radius: 4rpx;
      background-color: #a8a8a8;
    }
  }
</style>